<template>
	<div style="height: 100%;position: relative;">
		<div id="a1" v-show="liveImgShow"></div>
		<div v-show="!liveImgShow" style="position:relative;height: 100%;">
			<img class="liveImg" :src="liveInfo.roomPoster=='' || liveInfo.roomPoster=='undefined'?bgImg:liveInfo.roomPoster" @click="imgClick">
		</div>
		<!-- <div class="countDownForRoom" v-show="timeRunShow">
			<div style="margin: auto;max-width: 600px;">
				<p class="countDownTitle">
					<span v-if="days=='00'">距离直播时间还剩</span>
					<span v-else>距离直播时间还剩{{days}}天</span>
				</p>
				<div class="timeRun">
					<div class="timeBox">
						<p>{{hours}}</p>
					</div>
					<div class="timeDot">:</div>
					<div class="timeBox">
						<p>{{minutes}}</p>
					</div>
					<div class="timeDot">:</div>
					<div class="timeBox">
						<p>{{seconds}}</p>
					</div>
				</div>
			</div>
		</div> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				bgImg: require("../../static/img/backbg.png"),
				hours: "",
				minutes: "",
				seconds: "",
				days: "",
				title: "",
				time: "",
				tickTimer: true,
				timeObj: "", //倒计时赋值对象
				playerStatus:0
			};
		},
		computed: {
			timeRunShow(){
				return this.$store.state.timeRunShow//倒计时开关
			},
			liveImgShow() {
				return this.$store.state.liveImgShow; //视频图片显示互换
			},
			liveInfo() {
				return this.$store.state.liveInfo;
			},
			live() {
				return this.$store.state.live;
			},
		},
		created() {
			setTimeout(() => {
				let info = this.$store.state.liveInfo
				if (info.viewPermission == 0) {
					this.$store.state.viewPermission = false; //观看限制验证
					this.getUserCollect(1); //登录心跳
					this.testStatus(this.$store.state.live);
				} else {
					if (this.$store.state.verify) { /*如果已经验证过*/
						this.$store.state.viewPermission = false;
						this.getUserCollect(1); //登录心跳
						this.testStatus(this.$store.state.live);
					} else {
						this.$store.state.viewPermission = true;
						this.$store.state.liveImgShow = false;
					}
				}
			}, 200);
		},
		methods: {
			imgClick() {
				console.log('直播状态',this.playerStatus);
				if(this.playerStatus == 0){
                    this.$toast({
						message: "直播未开始，请稍后再来",
						duration: 1500,
					});
				}else if(this.playerStatus == 2){
                    this.$toast({
						message: "直播已暂停，请稍后再来",
						duration: 1500,
					});
				}else if(this.playerStatus == 3){
                    this.$toast({
						message: "直播已结束，请稍后再来",
						duration: 1500,
					});
				}
				
			},
			/*直播倒计时*/
			checkTime(i) {
				if (i < 10) {
					i = "0" + i;
				}
				return i;
			},
			timer(t) {
					this.$store.state.timeRunShow = true;
					var willtime = t.replace(/-/g, "/");
					var ts = new Date(willtime) - new Date(); //计算剩余的毫秒数
					var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
					var hh = parseInt((ts / 1000 / 60 / 60) % 24, 10); //计算剩余的小时数
					var mm = parseInt((ts / 1000 / 60) % 60, 10); //计算剩余的分钟数
					var ss = parseInt((ts / 1000) % 60, 10); //计算剩余的秒数
					if (ts > 0) {
						this.days = this.checkTime(dd);
						this.hours = this.checkTime(hh);
						this.minutes = this.checkTime(mm);
						this.seconds = this.checkTime(ss);
					} else {
						this.$store.state.timeRunShow = false;
						clearInterval(this.timeObj);
					}
			},
			// 视频状态
			testStatus(info) {
				var item = info;
				this.playerStatus = item.liveRoom.status;
				if (item.liveRoom.status == 1) {
					//直播
					this.showPlayer(this.statusComm(item), true, false, item.liveRoom.roomPoster);
				} else if (item.liveRoom.status == 2) {
					//暂停
					this.videoplaySwitch(item, this.comm(item));
				} else if (item.liveRoom.status == 3) {
					//结束
					this.videoplaySwitch(item, this.comm(item));
				} else {
					this.videoplaySwitch(item, this.comm(item));
				}
			},
			//回放
			videoplaySwitch(info, src) {
				if (info.liveRoom.videoplaySwitch > 0) { //开启回放
					this.$store.state.liveImgShow = true;
					this.showPlayer(src, false, true, info.liveRoom.roomPoster);
				} else {
					this.$store.state.liveImgShow = false;
					if (info.liveRoom.countdownSwitch > 0) {
						this.timeObj = setInterval(() => {
							this.timer(info.liveRoom.timeStart);
							this.$store.state.getTimer = info.liveRoom.timeStart;
						}, 1000);
					}
				}
			},
			// 回放地址
			comm(info) {
				let list = [];
				if (info.replay) {
					if (info.replay.transcodeSwitch == 0) { //转码
						let url = info.replay.downloadUrl;
						let vType = url.substring(url.lastIndexOf(".") + 1);
						let type = "video/" + vType;
						let list0 = [info.replay.downloadUrl, type, "原画", 0];
						// let list1 = [info.replay.downloadUrl1, type, '流畅', 0]
						// let list2 = [info.replay.downloadUrl2, type, '标清', 9]
						// let list3 = [info.replay.downloadUrl3, type, '高清', 0]
						// let list4 = [info.replay.downloadUrl4, type, '超清', 0]
						list.push(list0)
						// list.push(list1)
						// list.push(list2)
						// list.push(list3)
						// list.push(list4)
					} else { //非转码
						if (info.replay.transcodeSwitch == null) {
							this.$store.state.liveImgShow = false;
						} else {
							let url = info.replay.downloadUrl;
							let vType = url.substring(url.lastIndexOf(".") + 1);
							let type = "video/" + vType;
							let listText = [info.replay.downloadUrl, type, "原画", 10];
							list.push(listText);
						}
					}
				} else {
					let url = info.liveRoom.videoplayUrl;
					let vType = url.substring(url.lastIndexOf(".") + 1);
					let type = "video/" + vType;
					let list0 = [info.liveRoom.videoplayUrl, type, "原画", 10];
					list.push(list0);
				}
				return list;
			},
			// 直播地址
			statusComm(info) {
				var isPc = /macintosh|window/.test(navigator.userAgent.toLowerCase());
				let list = [];
				let listText = [];
				this.$store.state.liveImgShow = true;
				if (info.liveRoom.liveType == 1) {
					//推流
					if (isPc) {
						listText = [info.liveRoom.liveFlv4, "video/flv", "超清", 0];
					} else {
						listText = [info.liveRoom.liveHls4, "video/m3u8", "超清", 0];
					}
					list.push(listText);
				} else if (info.liveRoom.liveType == 2) {
					//拉流
					if (isPc) {
						listText = [info.liveRoom.pullUrlHls4, "video/flv", "超清", 0];
					} else {
						listText = [info.liveRoom.pullUrlHls4, "video/m3u8", "超清", 0];
					}
					list.push(listText);
				}
				return list;
			},
			// 播放器
			showPlayer(src, lv, loop, cover) {
				let videoObject = {
					container: "#a1", //“#”代表容器的ID，“.”或“”代表容器的class
					variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
					flashplayer: false, //如果强制使用flashplayer则设置成true
					video: src, //视频地址
					live: lv, // 	false=点播/直播回看，true=直播视频
					loop: loop, //false=播放结束后暂停，true=播放结束后重新播放
					poster: cover, // 定义播放器默认暂停时显示的一张图片地址。
					autoplay: true, //  是否
					loaded: this.loadedHandler()
				};
				this.player = new ckplayer(videoObject);
			},
			loadedHandler() {
				setTimeout(() => {
					this.player.addListener("play", this.playHandler());
				}, 1000);
			},
			playHandler() {
				this.$set(this.$store.state, "playTime", true);
				this.tickTimer = setInterval(() => {
					if (this.$store.state.playTime) {
						this.getUserCollect(3); //1登录 2聊天 3心跳
					} else {
						clearInterval(this.tickTimer);
					}
				}, 60000);
			},
			pauseHandler() {
				// 清除心跳 用户统计
				this.$set(this.$store.state, "playTime", false);
				clearInterval(this.tickTimer);
			},
			// 用户统计
			getUserCollect(type) {
				let source = this.version();
				let ip = returnCitySN["cip"];
				var openId = ""
				var nickname = ""
				if (sessionStorage.getItem("openid")) {
					openId = sessionStorage.getItem("openid");
					nickname = sessionStorage.getItem("nickname");
				} else {
					openId = localStorage.getItem("youkeId")
					nickname = localStorage.getItem("youkeName");
				}
				this.$http.post(this.$api.collectUserInfo(), {
					"companyId": sessionStorage.getItem("companyId"),
					"roomId": this.$route.params.id,
					"openid": openId,
					"name": nickname,
					"ip": ip,
					"phone": this.$store.state.signPhone,
					"source": source,
					"type": type,
				}).then(res => {
					if (res.data.code == 0) {}
				});
			},
			//获取终端类型
			version() {
				var u = window.navigator.userAgent;
				if (u.indexOf("Android") > -1) {
					var type = "Android";
				} else if (u.indexOf("iPhone") > -1) {
					var type = "iPhone";
				} else if (u.indexOf("iPad") > -1) {
					var type = "iPhone";
				} else if (u.indexOf("Windows") > -1) {
					var type = "PC";
				} else if (u.indexOf("Mac") > -1) {
					var type = "PC";
				}
				return type;
			}
		}
	};
</script>
<style scoped="scoped">
	#encodeLogo {
		position: absolute;
		height: auto;
		top: 0;
		left: 0;
	}

	.el-header {
		height: 30px !important;
		text-align: left;
	}

	.el-header img,
	#a1 {
		height: 100%;
	}
	#a1{
		z-index: 30000;
	}
	.countDownForRoom {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #fff;
		background: rgba(0, 0, 0, 0.8);
		z-index: 20000;
	}

	.liveImg {
		width: 100%;
		height: 100%;
		vertical-align: top;
	}

	.countDownTitle {
		margin: 20px 0;
		padding: 6px 0;
		text-align: center;
	}

	.countDownTitle span {
		padding: 6px;
		background: #1ca9e3;
		color: #fff;
	}

	.timeRun {
		display: flex;
		justify-content: space-around;
		margin: 0 40px;
		padding: 18px;
		background: #1b1b1b;
	}

	.timeBox {
		width: 60px;
		height: 70px;
		line-height: 70px;
		text-align: center;
		background: #323232;
		margin: 0 3px;
		font-size: 33px;
		border: 2px solid #2d2d2d;
	}

	.timeDot {
		align-self: center;
		font-size: 24px;
		font-weight: bolder;
	}
</style>
